<template>
  <div class="action">
    <CommonList class="list" :items="items"
                @select="onSelect"
                @use="onUse"></CommonList>
    <div class="buttons">
      <SButton @click="onGoNext">继续</SButton>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject } from 'vue';
import CommonList from '../common-list/list.vue';
import pluginsStore from '../../../store/plugins';
import { ListItem } from '../common-list';

import SButton from '@/ui-kit/button/button.vue';
import { ProvideKey } from '@/ui-kit/window';

export default defineComponent({
  name: 'action',
  components: { SButton, CommonList },
  emits: [],
  props: ['data'],
  setup(props, { emit }) {
    const closeWindow = inject(ProvideKey.CloseWindow, () => {});
    const responseCB = inject(ProvideKey.ResponseCB, (data: ListItem) => {});
    const acts = pluginsStore().getActions(props.data.bundle, props.data.filter);
    const items = acts.map((i: sail.ConditionData) => {
      const d: ListItem = {
        label: i.name,
        desc: i.desc,
        group: i.group,
        icon: i.icon,
        data: `${props.data.bundle}:${i.id}`,
      };
      return d;
    });
    let cur: ListItem | null = null;

    function onFinish() {
      if (cur) {
        responseCB(cur);
        closeWindow();
      }
    }

    return {
      items,
      onGoNext() {
        onFinish();
      },
      onUse(data: ListItem) {
        cur = data;
        onFinish();
      },
      onSelect(data: ListItem) {
        cur = data;
      },
    };
  },
});
</script>
<style scoped lang="scss">
.action {
  display: flex;
  flex-direction: column;

  .list {
    flex: 1;
  }

  .buttons {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
  }
}
</style>
